<script lang="ts" setup>
import { reactive } from 'vue'
const formList = reactive<FormList>([
  {
    label: '数字输入框',
    prop: 'inputNumber1',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    onChange(value) {
      console.log(value)
    },
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框限制值',
    prop: 'inputNumber2',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    stepStrictly: true,
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框控制器位置',
    prop: 'inputNumber3',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    precision: 2,
    controlsPosition: 'right',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框插槽',
    prop: 'inputNumber4',
    type: 'inputNumber',
    rule: [{ required: true, trigger: 'blur' }],
    header: '∮',
    footer: 'RMB',
    prepend: '🔽',
    append: '🔼'
  }
])
const submitForm = (formData: any) => {
  console.log(formData)
}
</script>
<template>
  <XyAddForm isCard :formList="formList" @submit-form="submitForm" />
</template>
